<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title></title>
    <style>
    *{
        box-sizing: border-box;
    }
    .container{
        width: 500px;
        margin: 0 auto;
    }
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .top{
        width: 220px;
        height: 155px;
        /* border: 1px solid red; */
        display: flex;
        justify-content: space-around;
    }
    .top .right img{
        width: 160px;
        height: 160px;
        border-radius: 10px;
    }
    .top .left img{
        border-radius: 10px;
    }
    .bottom ul{
        margin-top: 10px;
        width: 220px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around; 
    }
    .bottom img{
        border-radius: 10px;
    }
    div img{
        cursor: pointer;
    }
    </style>
</head>
<body>
<div class="container">
    <div>
        <div class="top">
            <div class="right">
                <img src="./img/big_1.jpg" alt="" id="big"> </div>
            <ul class="left">
                <li><img src="./img/small_1.jpg" alt=""></li>  
                <li><img src="./img/small_2.jpg" alt=""></li>
                <li><img src="./img/small_3.jpg" alt=""></li>
            </ul>

        </div>


        <div class="bottom">
            <ul>
            <li><img alt="" src="./img/small_4.jpg"></li>
            <li><img alt="" src="./img/small_5.jpg"></li>
            <li><img alt="" src="./img/small_6.jpg"></li>
            <li><img alt="" src="./img/small_7.jpg"></li>
            <li><img alt="" src="./img/small_8.jpg"></li>
            <li><img alt="" src="./img/small_9.jpg"></li>
            <li><img alt="" src="./img/small_10.jpg"></li>
            <li><img alt="" src="./img/small_11.jpg"></li>
            </ul>
           
        </div>
    </div>
</div>
</body>
</html>

<script>
    var lis=document.querySelectorAll('li');
    var img=document.getElementById('big');
    var index=0;
        for(var i=0;i<lis.length;i++){
             lis[i].index=i+1;
            lis[i].onmouseover=function(){
            img.src='./img/big_'+this.index+'.jpg';
        }
    }






</script>